<template>
	<div>
		<base-image
			:src="`home/${appStore.lang}/banner-bottom-1-${isDesktop ? 'desktop' : 'mobile'}.png`"
			class="w-full h-100 mb-4"></base-image>
		<base-image
			:src="`home/${appStore.lang}/banner-bottom-2-${isDesktop ? 'desktop' : 'mobile'}.png`"
			class="w-full h-100"></base-image>
		<!-- <div v-if="isPC()" class="flex is-pc-content justify-between">
			<div class="left-content pl-[160px] py-[60px]">
				<div class="discover-text text-[36px]">发现我们的</div>
				<div class="discover-desc text-[48px]">全新体育投注流</div>
			</div>
			<div class="right-content pr-[130px] flex">
				<div class="pt-[25px]">
					<base-image class="pc-image" src="home/discover-pc-top.svg"></base-image>
				</div>
				<div class="ml-[16px]">
					<base-image class="pc-image" src="home/discover-pc-bottom.svg"></base-image>
				</div>
			</div>
		</div>
		<div v-else class="is-m-content text-center">
			<div class="pt-[18px] pb-[30px]">
				<div class="discover-text text-[24px]">发现我们的</div>
				<div class="discover-desc text-[32px]">全新体育投注流</div>
			</div>
			<base-image src="home/discover-card.svg"></base-image>
		</div> -->
	</div>
</template>
<script lang="ts" setup>
import { isDesktop } from '@/hooks/useIsPC.ts'
import { BaseImage } from '@/components/base'
import { useAppStore } from '@/store'
const appStore = useAppStore()
</script>
<style lang="scss" scoped>
.is-m-content {
	background-image: url('@/assets/img/home/discover-bg.svg');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	.discover-text {
		text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.25);
		line-height: 28px;
	}
	.discover-desc {
		text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.25);
		background: var(
			--1st,
			linear-gradient(
				145deg,
				#ffda16 9.95%,
				#fed415 22.39%,
				#fdc412 38.14%,
				#fca90d 55.55%,
				#fa8407 74.62%,
				#f85c00 92.86%
			)
		);
		line-height: 36px;
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}
.is-pc-content {
	// background-color: red;
	.left-content {
		background-image: url('@/assets/img/home/discover-pc-left.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left 0 top 0;
	}
	.right-content {
		background-image: url('@/assets/img/home/discover-pc-right.svg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: right 0 bottom 0;
	}
	.discover-text {
		text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.25);
		line-height: 54px;
	}
	.discover-desc {
		text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.25);
		background: var(
			--1st,
			linear-gradient(
				145deg,
				#ffda16 9.95%,
				#fed415 22.39%,
				#fdc412 38.14%,
				#fca90d 55.55%,
				#fa8407 74.62%,
				#f85c00 92.86%
			)
		);
		line-height: 66px;
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}
</style>
